<script lang="ts" setup>
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { EnrollmentApi } from '@/apis'
import { useDictLabel } from '@/hooks'
import getAvatar from '@/utils/avatar'
import { getClassImage } from '@/utils/image'
import { Message } from '@arco-design/web-vue'
import SellerSelect from './components/SellerSelect.vue'

const router = useRouter()
const route = useRoute()

const dataId = ref()
const tableData = ref<EnrollmentApi.EnrollLessonResp[]>([])
const loading = ref(false)
const dataDetail = ref<EnrollmentApi.EnrollmentDetailResp>()

const getDetail = async () => {
  const res = await EnrollmentApi.getEnrollmentDetail(dataId.value)
  tableData.value = res.enrollLessonList || []
  dataDetail.value = res
}

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1),
  },
  { title: '课次标题', dataIndex: 'title', width: 120 },
  { title: '上课时间', dataIndex: 'lessonDate', slotName: 'lessonDate', width: 220 },
  { title: '主讲老师', dataIndex: 'leadTeacherName', width: 100 },
  { title: '教室', dataIndex: 'classroomName', slotName: 'classroomName', width: 120 },
  { title: '课消状态', dataIndex: 'signInStatus', slotName: 'signInStatus', align: 'center', width: 200 },
  { title: '订单号', dataIndex: 'orderId', slotName: 'orderId' },

]

const changeInfoList = ref<Array<EnrollmentApi.EnrollmentChangeInfoResp>>([])
const getChangeInfoList = async () => {
  changeInfoList.value = await EnrollmentApi.getChangeInfo(route.query.id as string)
}

const sellerId = ref('')
const sellerRef = ref<InstanceType<typeof SellerSelect>>()
const openSeller = () => {
  sellerRef.value?.open()
}
const sellerOK = async (val) => {
  try {
    await EnrollmentApi.addEnroll({
      enrollmentId: `${route.query.id?.toString()}`,
      sellerId: val,
    })
    Message.success('操作成功')
    getDetail()
  // eslint-disable-next-line unused-imports/no-unused-vars
  } catch (_) {
  }
}

// 转班调课
const gotoChangeClass = (changeType: string) => {
  router.push({ path: '/education/class/change/create', query: {
    type: changeType,
    studentId: dataDetail.value?.student.id,
    enrollmentId: dataId.value,
  } })
}
// 退班退课
const gotoCancelClass = (changeType: string) => {
  router.push({ path: '/education/class/cancel/create', query: {
    type: changeType,
    studentId: dataDetail.value?.student.id,
    enrollmentId: dataId.value,
  } })
}

// 班级详情
const gotoClassDetail = (classId?: string) => {
  router.push({ path: '/education/class/detail', query: { id: classId } })
}

// 订单详情
const gotoOrderDetail = (orderId: string) => {
  router.push({ path: '/shop/enrollment/order/detail', query: { id: orderId } })
}

onMounted(() => {
  dataId.value = route.query.id as string
  getDetail()
  getChangeInfoList()
})
</script>

<template>
  <ProPage title="报名详情">
    <template #title>
      <a-page-header title="报名详情" :subtitle="dataId" @back="router.back()">
        <template #extra>
          <a-dropdown trigger="hover">
            <a-button type="primary" size="small">
              操作
              <icon-down />
            </a-button>
            <template #content>
              <a-doption v-permission="['edu:class-change:manage']" @click="openSeller">
                设置销售顾问
              </a-doption>
              <a-doption v-permission="['edu:class-change:manage']" @click="gotoChangeClass('CHANGE_CLASS')">
                转班
              </a-doption>
              <a-doption v-permission="['edu:class-change:manage']" @click="gotoChangeClass('CHANGE_LESSON')">
                调课
              </a-doption>
              <a-doption v-permission="['edu:class-cancel:manage']" @click="gotoCancelClass('CANCEL_CLASS')">
                退班
              </a-doption>
              <a-doption v-permission="['edu:class-cancel:manage']" @click="gotoCancelClass('CANCEL_LESSON')">
                退课
              </a-doption>
            </template>
          </a-dropdown>
        </template>
      </a-page-header>
    </template>
    <div class="flex gap-4">
      <div class="flex-[3]">
        <a-card title="学生详情" class="section">
          <div class="flex gap-4">
            <a-avatar :size="54" shape="circle">
              <img :src="getAvatar(dataDetail?.student.avatar, dataDetail?.student.gender)" alt="avatar">
            </a-avatar>
            <div>
              <div>
                <span class="text-16px color-black font-500">{{ dataDetail?.student?.name }}</span>
                <CellGenderIcon :gender="dataDetail?.student.gender" />
              </div>
              <a-tag color="green" class="mt-3">
                <CellDict code="EnrollStatusEnum" :value="dataDetail?.student.enrollStatus" />
              </a-tag>
            </div>
            <div class="flex-1">
              <a-row>
                <a-col :span="8">
                  <span class="label">联系方式</span>
                  <span class="value">{{ dataDetail?.student.parentPhone }}</span>
                </a-col>
                <a-col :span="8">
                  <span class="label">出生年月</span>
                  <span class="value">{{ dataDetail?.student.birthdate || '-' }}</span>
                </a-col>
                <a-col :span="8">
                  <span class="label">入学年份</span>
                  <span class="value">{{ dataDetail?.student.admissionYear || '-' }}</span>
                </a-col>
              </a-row>
              <a-row class="mt-4">
                <a-col :span="8">
                  <span class="label">就读学校</span>
                  <span class="value">{{ dataDetail?.student.fulltimeSchool || '-' }}</span>
                </a-col>
                <a-col :span="8">
                  <span class="label">加入时间</span>
                  <span class="value">{{ dataDetail?.student.createTime || '-' }}</span>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-divider />
        <a-card title="班级详情" class="section">
          <div class="flex gap-4">
            <a-image
              width="190"
              height="136"
              :src="getClassImage(dataDetail?.classInfo.image)"
            />
            <div class="flex-1">
              <a-space>
                <span class="text-16px color-black font-500">{{ dataDetail?.classInfo.name }}</span>
                <a-divider direction="vertical" />
                <a-typography-text type="secondary" copyable>
                  <a-link @click="gotoClassDetail(dataDetail?.classId)">
                    {{ dataDetail?.classId }}
                  </a-link>
                </a-typography-text>
              </a-space>
              <div class="class-info mt-3">
                <div>
                  <span class="label">年份</span>
                  <span class="value">
                    {{ dataDetail?.classInfo.classYear }}/{{ useDictLabel('TermEnum', dataDetail?.classInfo.term) }}
                  </span>
                </div>
                <div>
                  <span class="label">年级</span>
                  <span class="value">{{ useDictLabel('Grade', dataDetail?.classInfo.grade) }}</span>
                </div>
                <div>
                  <span class="label">科目</span>
                  <span class="value">{{ useDictLabel('Subject', dataDetail?.classInfo.subject) }}</span>
                </div>
                <div>
                  <span class="label">主讲老师</span>
                  <span class="value">{{ dataDetail?.classInfo.leadTeacherName }}</span>
                </div>
                <div>
                  <span class="label">辅导老师</span>
                  <span class="value">{{ dataDetail?.classInfo.assistTeacherName || '-' }}</span>
                </div>
                <div>
                  <span class="label">班型</span>
                  <span class="value">{{ dataDetail?.classInfo.classTypeName }}({{ dataDetail?.classInfo.classLevelLimit }})</span>
                </div>
                <div>
                  <span class="label">上课情况</span>
                  <span class="value">{{ dataDetail?.classInfo.completedLessonCount }} / {{ dataDetail?.classInfo.totalLessonCount }} 节</span>
                </div>
                <div>
                  <span class="label">班级状态</span>
                  <CellDict code="ClassStatusEnum" :value="dataDetail?.classInfo.classStatus" />
                  <!-- <DictLabel v-model="classInfo.classStatus" code="ClassStatusEnum" /> -->
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <div class="lesson">
          <a-card title="报名课次" class="section">
            <template #extra>
              <a-tag color="gray">
                <span>可转班次数</span>
                <span class="ml-2 color-[#165DFF]"> 无限制</span>
                <span class="ml-6">可调课次数</span>
                <span class="ml-2 color-[#165DFF]"> {{ dataDetail?.remainLessonChangeCount || '-' }}次</span>
              </a-tag>
            </template>
            <ProTable :data="tableData" :columns="columns" :loading="loading" :pagination="false">
              <template #classroomName="{ record }">
                <CellClassroom :campus-name="record.campusName" :classroom-name="record.classroomName" />
              </template>
              <template #lessonDate="{ record }">
                {{ record.lessonDate }} {{ record.startTime }} - {{ record.endTime }}
              </template>
              <template #signInStatus="{ record }">
                <a-space size="small">
                  <CellStatus :status="record.lessonStudent.signInStatus" on-text="" off-text="" />
                  <span class="text-13px text-gray">{{ record.lessonStudent.signInTime }}</span>
                </a-space>
              </template>
              <template #orderId="{ record }">
                <a-link @click="gotoOrderDetail(record.orderId)">
                  <span class="text-12px">{{ record.orderId }}</span>
                </a-link>
              </template>
            </ProTable>
          </a-card>
        </div>
      </div>
      <div class="flex-1 flex-shrink-0">
        <a-card title="变更信息" class="section">
          <div class="exchange-content">
            <a-timeline v-if="changeInfoList.length">
              <a-timeline-item v-for="(item, index) in changeInfoList" :key="index" label="" line-type="dashed" line-color="#165DFF">
                <div class="flex-row-between-center">
                  <span class="text-16px font-500">{{ useDictLabel('ChangeTypeEnum', item.changeType) }}</span>
                  <span class="text-12px text-gray">{{ item.createTime }}</span>
                  <CellDict code="OperateStatusEnum" :value="item.operateStatus" />
                </div>
                <!-- <div class="line-item">
                  <span class="label">订单单号：</span>
                  <span class="value color-[#165DFF!important]">{{ item.businessId }}</span>
                </div> -->

                <!-- <div class="line-item">
                  <span class="label">操作来源：</span>
                  <span class="value">{{ useDictLabel('OperateSourceEnum', item.operateSource) }}</span>
                </div> -->
                <!-- <div class="line-item">
                  <span class="label">操作状态：</span>
                  <span class="value">{{ useDictLabel('OperateStatusEnum', item.operateStatus) }}</span>
                </div> -->
                <div class="line-item">
                  <span class="label">操作详情：</span>
                  <span class="value text-12px"> {{ item.details }}</span>
                </div>
              </a-timeline-item>
            </a-timeline>
            <span v-else>暂无信息</span>
          </div>
        </a-card>
      </div>
    </div>
    <SellerSelect ref="sellerRef" v-model="sellerId" @ok="sellerOK" />
  </ProPage>
</template>

<style lang='less' scoped>
:deep(.arco-card-header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 10px 0;
}
:deep(.arco-form-item-label-col) {
  padding-right: 10px;
  width: 50px;
}
:deep(.arco-page-header) {
  padding: 10px 0;
}
:deep(.pro-table-toolbar) {
  display: none;
}
.arco-divider {
  margin: 10px 0;
}
.label {
  display: inline-block;
  width: 80px;
  color: #888;
  flex-shrink: 0;
}
.value {
  color: #111;
}
.class-info {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item-large {
  grid-column: span 2;
}
.lesson {
  :deep(.arco-card-body) {
    padding-top: 0 !important;
  }
}
.exchange-content {
  border-radius: 10px;
  background: #f8f8f8;
  padding: 20px;
}
.line-item {
  margin-top: 5px;
}
</style>
